<template>
	<view class="balance">
		<Navigation title="余额" backType="back" background="#fff" />
		<view class="w-f f ai-c fd-c jc-c pt-50 pb-28">
			<view class="fs-32 text-color4">余额</view>
			<view class="mt-8">
				<text class="fs-36 fw-600 text-color4">¥</text>
				<text class="fs-56 fw-600 text-color4 ml-8">{{wallet.balance}}</text>
			</view>
			<view class="w-172 h-56 b-567 f ai-c jc-c mt-40 all" @click="billShow=true">
				<view class="fs-26 text-color2">全部账单</view>
				<image src="../static/mine/xia.png" class="w-20 h-20 ml-8"></image>
			</view>
			<view class="f ai-c jc-s-b mt-50 ph-40 w-f">
				<!-- <view class="f ai-c" @click="dateShow=true">
					<view class="fs-26 text-color4 mr-8">今天</view>
					<u-icon name="arrow-down" color="#555555" size="11"></u-icon>
				</view> -->
				<!-- <view class="fs-26 text-color2">
					<text class="mr-24">收入 ¥154.00</text>
					<text>支出 ¥112.00</text>
				</view> -->
			</view>
		</view>
		<view class="bg">
			<view class="list w-f ph-40 pv-32 f ai-c jc-s-b" v-for="(item,index) in list">
				<view>
					<view class="fs-28 text-color4">{{item.title}}</view>
					<view class="fs-22 text-color3 mt-10">{{item.createTime}}</view>
				</view>
				<view class="fs-36 fw-600 text-color4">{{item.price<0?item.price:'+'+item.price}}</view>
			</view>
		</view>
		<!-- 账单 -->
		<u-popup :show="billShow" round="12">
			<view class="pt-40 ph-40">
				<view class="f ai-c jc-s-b pb-40">
					<view></view>
					<view class="fs-40 fw-600 text-color4">选择账单</view>
					<u-icon name="close" color="#222222" size="16" @click="billShow = false"></u-icon>
				</view>
				<view class="f ai-c jc-s-b h-128 list" v-for="(item,index) in bilList" :key="index" @click="selectBill(index)">
					<view class="f ai-c">
						<view class="fs-32 text-color4 ml-20">{{ item.name }}</view>
					</view>
					 <image src="../static/mine/gou.png" class="w-32 h-32" v-if="listParams.type==index"></image>
					<!-- <image src="../static/mine/gou.png" class="w-32 h-32"></image> -->
				</view>
			</view>
		</u-popup>
		<!-- 时间 -->
		<u-popup :show="dateShow" round="12">
			<view class="pt-40 ph-40">
				<view class="f ai-c jc-s-b pb-40">
					<view></view>
					<view class="fs-40 fw-600 text-color4">选择时间</view>
					<u-icon name="close" color="#222222" size="16" @click="dateShow = false"></u-icon>
				</view>
				<view class="f ai-c jc-s-b h-128 list" v-for="(item,index) in dateList" :key="index">
					<view class="f ai-c">
						<view class="fs-32 text-color4 ml-20">{{ item.name }}</view>
					</view>
					<image src="../static/mine/gou.png" class="w-32 h-32"></image>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue';
	import { transactionPage, walletGet } from '@/services/api/index';
	import { onShow, onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
	const list = ref<any[]>([]);
	const wallet = ref({});
	const { proxy } = getCurrentInstance();
	const billShow = ref(false);
	const dateShow = ref(false);
	const bilList = [{ name: '全部' }, { name: '收入' }, { name: '支出' }];
	const dateList = [{ name: '今天' }, { name: '近7日' }, { name: '近一月' }, { name: '全部' }];
	const listParams = ref<any>({
		type:0,
		pageNo: 1,
		pageSize: 10,
	});
	onShow(() => {

		getList();
		getWallet()
	});
	async function getList() {
		const { data } = await transactionPage(listParams.value);
		data.list.forEach((item : any) => {
			// if (item.createTime == null) {
				item.createTime = timestampToTime(item.createTime);
			// }
		});
		list.value = list.value.concat(data.list);
	}
	//钱包
	async function getWallet() {
		const { data } = await walletGet();
		wallet.value = data;

	}
	function timestampToTime(timestamp:number) {
	  // 时间戳为10位需*1000，时间戳为13位不需乘1000
	  var date = new Date(timestamp);
	  var Y = date.getFullYear() + "-";
	  var M =
	    (date.getMonth() + 1 < 10
	      ? "0" + (date.getMonth() + 1)
	      : date.getMonth() + 1) + "-";
	  var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
	  var h = date.getHours() + ":";
	  var m = date.getMinutes() + ":";
	  var s = date.getSeconds();
	  return Y + M + D + h + m + s;
	}
	function selectBill(k:number){
		billShow.value = false;
		list.value = [];
		listParams.value.type = k;
		listParams.value.pageNo = 1;
		getList();
	}
	//下拉刷新
	onPullDownRefresh(() => {
		list.value = [];
		listParams.value.pageNo = 1;
		getList();
	});
	//上拉加载
	onReachBottom(() => {
		listParams.value.pageNo++;
		getList();
	});
</script>
<style lang="scss" scoped>
	.balance {
		background: #f5f5f5;
		min-height: 100vh;

		.list {
			border-bottom: 1px solid #f5f5f5;
		}

		.bg {
			background: #fff;
			min-height: 100vh;
			border-radius: 24rpx 24rpx 0 0;
		}

		.all {
			background: #ebebeb;
		}
	}
</style>